<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.8.3-min.js"></script>
<script src="jquery.SuMessager.js"></script>
<script>
/*------------绑定div------------*/
var demo_slide = {
	domid:'win1',//id不可重复************必填
	bindwin:'.layout-panel-center',//绑定窗口选择器
	title:'推荐信息',//标题
	time:0,//自动隐藏时间，0为不隐藏，默认3000
	layer:{//窗口大小
		width:300,
		height:200,
		zindex:100//窗口上下层级，大的在上面
	},
	anims:{
		type:'slide',//动画效果，可选slide,fade,show
		speed:600//动画速度
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};

var demo_fade = {
	domid:'win2',
	bindwin:'.layout-panel-center',
	title:'今日新闻',
	time:0,
	layer:{
		width:300,
		height:200,
		zindex:101
	},
	anims:{
		type:'fade',
		speed:600
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};

var demo_show = {
	domid:'win3',
	bindwin:'.layout-panel-center',
	title:'通知公告',
	time:0,
	layer:{
		width:300,
		height:200,
		zindex:102
	},
	anims:{
		type:'show',
		speed:600
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};

/*------------绑定body------------*/
var demo_slide2 = {
	domid:'win4',
	bindwin:'body',
	title:'推荐信息',
	time:0,
	layer:{
		width:300,
		height:200,
		zindex:100
	},
	anims:{
		type:'slide',
		speed:600
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};

var demo_fade2 = {
	domid:'win5',
	title:'今日新闻',
	time:0,
	layer:{
		width:300,
		height:200,
		zindex:101
	},
	anims:{
		type:'fade',
		speed:600
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};

var demo_show2 = {
	domid:'win6',
	title:'通知公告',
	time:0,
	layer:{
		width:300,
		height:200,
		zindex:102
	},
	anims:{
		type:'show',
		speed:600
	},
	content:'<a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题</a><br><br>2016-05-06 18:00'
};
</script>
</head>
<body style="height:3000px;">
	<div class="layout-panel-center" style="position:relative;left: 180px;top: 20px;width:400px;height:300px;border:1px solid #69d;overflow-y:auto;">
		<div style="height:1000px"></div>
	</div>
	
	<div style="position:relative;left: 180px;top: 80px;display:inline-block;padding:20px;border:1px solid #69d;">
		绑定指定div窗口:<br><button onclick='$.suMessager(demo_slide)'>Slide show</button>
		<button onclick='$.suMessager.closefun(demo_slide)'>Slide Hide</button><br>
		<br><button onclick='$.suMessager(demo_fade)'>Fade show</button>
		<button onclick='$.suMessager.closefun(demo_fade)'>Fade Hide</button><br>
		<br><button onclick='$.suMessager(demo_show)'>Show</button>
		<button onclick='$.suMessager.closefun(demo_show)'>Hide</button>
	</div>
	
	<div style="position:relative;left: 380px;top: 80px;display:inline-block;padding:20px;border:1px solid #69d;">
		绑定body窗口:<br><button onclick='$.suMessager(demo_slide2)'>Slide show</button>
		<button onclick='$.suMessager.closefun(demo_slide2)'>Slide Hide</button><br>
		<br><button onclick='$.suMessager(demo_fade2)'>Fade show</button>
		<button onclick='$.suMessager.closefun(demo_fade2)'>Fade Hide</button><br>
		<br><button onclick='$.suMessager(demo_show2)'>Show</button>
		<button onclick='$.suMessager.closefun(demo_show2)'>Hide</button>
	</div>
</body>

</html>
